<template>
  <router-link :to="path">
    <div class="cell-item">
      <div class="text-group">
        <div class="icon">
          <slot name="icon"></slot>
        </div>
        <div class="text">{{ text }}</div>
      </div>
      <div class="icon">
        <Icon name="arrow" />
      </div>
    </div>
  </router-link>
</template>
<script lang="ts" setup>
import { Icon } from "vant";
defineProps({
  text: {
    type: String,
    required: true,
  },
  path: {
    type: String,
    required: true,
  },
});
</script>
<style lang="less">
.cell-item {
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  .text-group {
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      margin-right: 5px;
    }
  }
}
</style>
